<template>
  <p-modal
    title=""
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    centered
    :wrapClassName="'scclycd'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <div class="modalHead">
        生产异常处置单
        <span class="span1">异常事件编号 </span>
        <span class="span2">YC2020042334521</span>
      </div>
      <p-timeline>
        <p-timeline-item color="green">
          <h4 class="title">异常事件发起</h4>
          <div class="timeItem">
            <div class="left">
              <info-list label-width="168">
                <info-list-item label="异常发起人：">
                  {{123}}
                </info-list-item>
                <info-list-item label="申请时间：">
                  123
                </info-list-item>
                <info-list-item label="不良描述：">
                  123
                </info-list-item>
              </info-list>
            </div>
            <div class="mid">
              <info-list label-width="168">
                <info-list-item label="异常类型：">
                  123
                </info-list-item>
                <info-list-item label="异常产线：">
                  123
                </info-list-item>
                <info-list-item label="生产数量：">
                  123
                </info-list-item>
              </info-list>
            </div>
            <div class="right">
              <info-list label-width="200">
                <info-list-item label="工单号：">
                  123
                </info-list-item>
                <info-list-item label="异常发起部门：">
                  123
                </info-list-item>
                <info-list-item label="不良数量：">
                  123
                </info-list-item>
              </info-list>
            </div>
          </div>
        </p-timeline-item>
        <p-timeline-item color="green">
          <h4 class="title">异常分配(主管）</h4>
          <div class="timeItem">
            <div class="left">
              <info-list label-width="168">
                <info-list-item label="异常分配人：">
                  {{123}}
                </info-list-item>
                <info-list-item label="责任部门：">
                  123
                </info-list-item>
              </info-list>
            </div>
            <div class="mid">
              <info-list label-width="226">
                <info-list-item label="异常分配时间：">
                  123
                </info-list-item>
                <info-list-item label="责任部门接收人：">
                  123
                </info-list-item>
              </info-list>
            </div>
            <div>
              <info-list label-width="136">
                <info-list-item label="异常描述：">
                  123
                </info-list-item>
              </info-list>
            </div>
          </div>
        </p-timeline-item>
        <p-timeline-item color="blue">
          <p-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
          <h4 class="title">异常处置</h4>
          <div class="timeItem">
            <div class="left">
              <info-list label-width="168">
                <info-list-item label="异常处置人：">
                  {{123}}
                </info-list-item>
                <info-list-item label="处置方案：">
                  123
                </info-list-item>
              </info-list>
            </div>
            <div class="mid">
              <info-list label-width="226">
                <info-list-item label="异常处置时间：">
                  123
                </info-list-item>
                <info-list-item label="异常判定：">
                  123
                </info-list-item>
              </info-list>
            </div>
          </div>
        </p-timeline-item>
        <p-timeline-item color="gray">
          <h4 class="title">异常事件关闭</h4>
        </p-timeline-item>
      </p-timeline>
      <div>
        <h4 class="title" style="margin-bottom: 10px;">异常事件日志</h4>
        <p-table :scroll="{y:200}" :pagination="false" :columns="columns" :data-source="dataSource" bordered>
        </p-table>
      </div>
    </p-spin>
  </p-modal>
</template>

<script>
import _ from "lodash";
import mesPeProcess from "@/api/mesPeProcess";
export default {
  name: "scclycd",
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      handle: '',
      width: 800,
      visible: false,
      confirmLoading: false,
      stepData: {},
      dataSource: [
        {
          key: '1',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
        {
          key: '2',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
        {
          key: '3',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
        {
          key: '4',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
      ],
      columns: [
        {
          title: "序号",
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align: 'center',
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title: '异常记录',
          align: 'center',
          dataIndex: 'ycjl',
          ellipsis: true,
        },
      ]
    };
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
  },
  mounted() {
    this.initValue();
  },
  methods: {
    /* validateQuantity(rule, value, callback){
      if (value === '' || value === null) {
        callback(new Error('请输入内容'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      } 
    }, */
    initValue() {
      this.visible = this.value
    },
    handleOk(){
      const that = this;
      /* that.$refs.ruleForm.validate(valid => {
        if (valid) {
        }
      }); */
    },
    handleCancel(){
      this.visible = false;
      // this.$refs.ruleForm.resetFields();
    },
    /* getTemplatelist(){
      mesPeProcess.getTemplatelist({
        equno: this.form.resourceCode,
        standard: 'GZZYSX',
      }).then( res =>{
        if (res.code === 0){
          const curData = res.data || [];
          this.maintainContentCodeList = curData.map( el => {
            return {
              code: el.checkno,
              name: el.position,
            }
          });
        }
      })
    }, */
  },
};
</script>

<style lang="less">
  .scclycd {
    .modalHead{
      color: rgba(0, 0, 0, 0.85);
      font-weight: bold;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 30px;
      span{
        font-weight: normal;
      }
      .span1{
        margin-left: 15px;
      }
    }
    .poros-form .poros-form-item{
      display: flex;
    }
    .poros-form-item-label{
      width: 146px;
    }
    .poros-form-item .poros-form-item-control-wrapper{
      overflow: hidden;
    }
    .timeItem{
      display: flex;
      margin: 20px 0 0 0;
    }
    .poros-timeline-item-last{
      padding-bottom: 0;
    }
    h4.title{
      font-weight: bold;
    }
  }
</style>

